import { ProTable, } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import React, { useRef, useState, } from 'react';
import { request } from '../../utils/request.ts';
import Edit from './edit.jsx';
const Certificate = () => {
  const actionRef = useRef();
  const formRef = useRef();
  const columns = [
    {
      title: '证书类型',
      dataIndex: 'type',
      valueType: 'select',
      fieldProps: {
        // @ts-ignore
        placeholder: '全部类型',
      },
      valueEnum: {
        // [-1]: { text: '全部' },
        1: { text: '教练' },
        2: { text: '学员' },
      },
    },
    {
      title: '证书背景图',
      dataIndex: 'bgPic',
      search: false,
      // eslint-disable-next-line jsx-a11y/alt-text
      render: (_, record) => {
        if (record.bgPic) {
          return <img src={_} style={{ width: '60px', objectFit: 'cover', }} />
        } else {
          return '-';
        }
      }
    },
    {
      title: '证书名称',
      dataIndex: 'name',
      fieldProps: {
        // @ts-ignore
        placeholder: '请输入证书名称',
      },
      ellipsis: true,
    },
    {
      title: '认证价格',
      dataIndex: 'price',
      search: false,
      ellipsis: true,
    },
    {
      title: '说明',
      dataIndex: 'remark',
      search: false,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a key="edit" onClick={() => editCertificate(record)}>编辑</a>,
        <a key="del" onClick={() => {delCertificate(record)}}>删除</a>,
      ],
    },
  ];
  const [open, setOpen] = useState(false);
  const [record, setRecord] = useState({});
  const editCertificate = (record) => {
    setRecord(record);
    setOpen(true);
  }
  const delCertificate = async(record) => {
    try {
      const res = await request('/api/card/delete', {
        method: 'POST',
        data: {
          id: record?.id,
        },
      });
      console.log('res==',res);
      if (res.data) {
        message.success('删除成功！');
        actionRef.current?.reload();
      } else {
        message.error(res.msg);
      }
    } catch (error) {
      console.error('Failed to submit data:', error);
    }
  }
  return (
    <>
      <div>
        <ProTable
          headerTitle='证书列表'
          actionRef={actionRef}
          formRef = {formRef}
          form={{ span: 8 }}
          rowKey="id"
          search={{
            labelWidth: 80,
          }}
          toolBarRender={() => [
            <Button
              type="primary"
              key="add"
              onClick={() => { setRecord({}); setOpen(true)}}
            >
              新增
            </Button>,
          ]}
          request={async ({ current, type, ...other }) => {
            const data = {
              ...other,
              pageNum: current,
              type: type || -1,
            }
            let res = await request('/api/card/pageList', {
              method: 'POST',
              data,
            });
            const { records, total  } = res?.data || {};
            return {
              data: records || [],
              total: total || 0,
            };
          }}
          columns={columns}
        />
      </div>
      <Edit open={open} setOpen={setOpen} actionRef={actionRef} record={record} />
    </>
  );
};

export default Certificate;
